<template>
	<view class="">
		<view class="wrap">
			<swiper class="banner-slide" indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#fff"
			 autoplay="ture" interval="5000">
				<swiper-item v-for="item in resData.ad_img" :key="i">
					<image :src="item.big" class="banner-image"></image>
				</swiper-item>
			</swiper>
			<view class="nav-list">
				<view class="nav-item" @click="more_itemize">
					<image src="../../static/images/nav-icon1.png" class="nav-icon"></image>
					<view class="nav-p">当季新品</view>
				</view>
				
				<black v-if="is_login" class="nav-item">
					<view @click="user_images">
						<image src="../../static/images/nav-icon2.png" class="nav-icon"></image>
						<view class="nav-p">我的美拍</view>
					</view>
				</black>
				<black v-else class="nav-item">
					<view  @click="user_login">
						<image src="../../static/images/nav-icon2.png" class="nav-icon"></image>
						<view class="nav-p">我的美拍</view>
					</view>
				</black>
				
				<view class="nav-item" @click="Bargaining">
					<image src="../../static/images/free-icon.png" class="free-icon"></image>
					<image src="../../static/images/nav-icon3.png" class="nav-icon"></image>
					<view class="nav-p">砍价免费拍</view>
				</view>
				<view class="nav-item" @click="welfare">
					<image src="../../static/images/nav-icon4.png" class="nav-icon"></image>
					<view class="nav-p">会员福利</view>
				</view>
			</view>

			<view class="custom">
				<view class="custom-left">
					<view class="custom-title">我的美照</view>
					<view class="custom-counter-box">
						<image src="../../static/images/logo.jpg" class="custom-logo"></image>
						<view class="custom-counter">
							<view class="custom-counter-h">{{my_photo}}</view>
							<view class="custom-counter-p">张</view>
						</view>
					</view>
					<view class="phone-stu">{{is_login?'已关联手机':'未关联手机'}}</view>
					<black v-if="is_login">
						<view class="phone-link" @click="user_images">点击查看</view>
					</black>
					<black v-else>
						<view class="phone-link" @click="user_login">关联手机</view>
					</black>
				</view>
				<view class="custom-right">
					<view class="custom-link" @click="luck_draw">
						<image src="../../static/images/1_07.jpg" class="custom-banner"></image>
					</view>
					<view class="custom-link">
						<!-- <button open-type="share" class="share-btn">
							<image src="../../static/images/1_14.jpg" class="custom-banner"></image>
						</button> -->
						<view class="share-btn" @click="newfriend">
							<image src="../../static/images/1_14.jpg" class="custom-banner"></image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 悬浮弹出 -->
		<view class="remind_wraparea">
			<view v-for="(item,i) in resData.log_tips" :class=" i == rotcurrent ? 'remind_wrap rot_current' : 'remind_wrap' ">
				<view class="remind_box">
					<view class="remind_info">{{item.user_name}}   {{item.operationn_ame}}</view>
				</view>
			</view>
		</view>

		<view class="guest-title">
			<view class="guest-title-left">
				<view class="guest-time">
					<view class="guest-day">{{resData.day_info.day}}</view>
					<view class="guest-mont">{{resData.day_info.moth[1]}}月</view>
				</view>
				<view class="guest-title-info">
					<view class="guest-title-bar"></view>
					<view class="guest-title-h">每日客片</view>
					<view class="guest-title-p">Daily guest photos</view>
				</view>
			</view>
			<view class="more-btn" @click="more_itemize">查看更多</view>
		</view>

		<swiper class="picture-slide" display-multiple-items="2" previous-margin="30rpx" next-margin="30rpx" snap-to-edge="true">
			<swiper-item v-for="item in resData.show_photos" :key="i">
				<view class="picture-item" @click="open" :data-id="item.id">
					<view class="picture-box">
						<image :src="item.cover_img" class="picture-image"></image>
						<view class="picture-num">
							<image src="../../static/images/pic-icon.png" class="pic-icon"></image>
							<view class="picture-p">{{item.num}}张</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>


		<view class="huodong">
			<view class="huodong-title">
				<view class="huodong-title-left">
					<image src="../../static/images/gift_21.jpg" class="gift-icon"></image>
					<view class="huodong-title-h">新品活动</view>
				</view>
				<view class="more-btn" @click="more_itemize">查看更多</view>
			</view>
			<scroll-view scroll-x class="classify-scroll">
				<view class="classify">
					<view class="classify-item" v-for="item in resData.category_list" @click="go_itemize" :data-cid="item.category_id" :data-name="item.name">
						<view class="classify-img">
							<image :src="item.thumb" class="classify-image"></image>
						</view>
						<view class="classify-name">{{item.name}}</view>
					</view>
				</view>
			</scroll-view>

			<view class="huodong-item" v-for="item in resData.goods_list.list" @click="go_itemize" :data-cid="item.category_id" :data-name="item.category_name">
				<view class="huodong-img">
					<image :src="item.thumb" class="huodong-image"></image>
				</view>
				<view class="huodong-info">
					<view class="huodong-info-top">
						<view class="huodong-name">{{item.name}}</view>
						<view class="huodong-label">{{item.category_name}}
							<image :src=" item.is_discount > 0 ? '../../static/images/off-img.png' : '' " class="off-icon"></image>
						</view>
					</view>
					<view class="huodong-p">{{item.small_title}}</view>
				</view>
			</view>
		</view>

		<page-foot :indexNum="indexNum"></page-foot>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				resData: [],
				indexNum: 1,
				is_login: false,
				rotcurrent: 0,
				setInter: '',
				my_photo: 0
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			get_info() {
				var that = this
				that.$http({
					url: 'Api/Index/index',
					data: '',
					hideLoading: true,
					success: res => {
						that.resData = res.data
						that.my_photo = res.data.my_phtots.num === null ? 0 : res.data.my_phtots.num
						if (res.data.uinfo == ''){
							that.is_login = false
						}else{
							if (res.data.uinfo.tel == ''){
								that.is_login = false
							}else{
								that.is_login = true
							}
						}
						
						that.startSetInter()
					}
				})
			},
			more_itemize(){
				uni.navigateTo({
					url: '/pages/works/itemize'
				})
			},
			user_login() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			
			user_images(){
				uni.navigateTo({
					url: '/pages/photos/myphotos'
				})
			},
			
			go_itemize(e){
				uni.navigateTo({
					url: '/pages/works/itemize?cid='+e.currentTarget.dataset.cid+'&name='+e.currentTarget.dataset.name
				})
			},
			
			startSetInter(){
				var that = this
				//将计时器赋值给setInter
				that.setInter = setInterval(
					function(){
						var numVal = that.rotcurrent
						var order_top = that.resData.log_tips.length 
						if(numVal == order_top){
							that.rotcurrent = 0
						}else{
							that.rotcurrent = numVal+1
						}
						// console.log('setInterval==' + that.rotcurrent);
					}
				, 5000)
			},
			
			open(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/works/iteminfo?id='+id
				})
			},
			
			Bargaining(){
				var id = this.resData.activity_ids[0]
				uni.navigateTo({
					url: '/pages/activity/index?aid='+id
				})
			},
			welfare(){
				var id = this.resData.activity_list[0]
				uni.navigateTo({
					url: '/pages/activity/list?catid='+id
				})	
			},
			luck_draw(){
				var id = this.resData.activity_ids[1]
				uni.navigateTo({
					url: '/pages/activity/index?aid='+id
				})	
			},
			newfriend(){
				var id = this.resData.activity_ids[2]
				uni.navigateTo({
					url: '/pages/activity/index?aid='+id
				})	
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.get_info()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {

		},

		onShareAppMessage(e) {
			return {
				title: '展示出最美的地方，来和我一起吧！',
				path: '/pages/index/index' ,//分享的页面路径
				imageUrl: '../../static/images/6_02.jpg'
			}
		}
	}
</script>

<style>
	.wrap {
		padding: 30rpx;
	}

	.banner-slide {
		height: 480rpx;
		margin-bottom: 30rpx;
	}

	.banner-image {
		height: 480rpx;
	}

	.float-bar {
		position: fixed;
		top: 200rpx;
		left: 0;
		z-index: 50;
	}

	.float-item {
		display: flex;
		align-items: center;
		padding: 10rpx;
		padding-left: 20rpx;
		padding-right: 50rpx;
		border-top-right-radius: 50rpx;
		border-bottom-right-radius: 50rpx;
		border: 1px #fff solid;
		border-left: none;
		background: rgba(0, 0, 0, .5);
		font-size: 12px;
		color: #fff;
		animation: viewlinear 3s linear infinite;
		animation-iteration-count: 1;
		opacity: 0;
	}

	@keyframes viewlinear {
		0% {
			opacity: 0;
			transform: translateY(40rpx)
		}

		30% {
			opacity: 1;
			transform: translateY(0)
		}

		70% {
			opacity: 1;
			transform: translateY(0)
		}

		100% {
			opacity: 0;
			transform: translateY(-40rpx)
		}

	}

	.nav-list {
		display: flex;
		margin-bottom: 30rpx;
	}

	.nav-item {
		width: 25%;
		padding: 20rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #4c4c4c;
		position: relative;
	}

	.nav-icon {
		width: 84rpx;
		height: 84rpx;
		margin-bottom: 20rpx;
	}

	.free-icon {
		width: 85rpx;
		height: 52rpx;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}

	.custom {
		display: flex;
		justify-content: space-between;
	}

	.custom-left {
		width: 280rpx;
		height: 340rpx;
		padding: 30rpx 20rpx 0;
		background: -webkit-linear-gradient(top, #fff3ef, #ffd9d0);
		background: -o-linear-gradient(bottom, #fff3ef, #ffd9d0);
		background: -moz-linear-gradient(bottom, #fff3ef, #ffd9d0);
		background: linear-gradient(to bottom, #fff3ef, #ffd9d0);
	}

	.custom-title {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #e94816;
		font-weight: bold;
	}

	.custom-counter-box {
		padding: 3rpx;
		display: flex;
		margin-bottom: 15rpx;
		background-color: #fff;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
	}

	.custom-logo {
		width: 154rpx;
		height: 84rpx;
	}

	.custom-counter {
		width: 80rpx;
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.custom-counter-h {
		font-size: 42rpx;
		font-weight: bold;
		line-height: 40rpx;
	}

	.custom-counter-p {
		font-size: 24rpx;
		font-weight: bold;
	}

	.phone-stu {
		margin-bottom: 30rpx;
		font-size: 22rpx;
		color: #999;
	}

	.phone-link {
		width: 160rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background: #e94816;
		line-height: 60rpx;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
	}

	.phone-link-btn {
		width: 160rpx;
		height: 60rpx;
		border-radius: 50rpx;
		background: #e94816;
		line-height: 40rpx;
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		padding: 10rpx 20rpx;
	}

	.custom-right {
		width: 390rpx;
		height: 340rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.custom-link {
		height: 160rpx;
	}

	.custom-banner {
		height: 160rpx;
	}

	.guest-title {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.guest-title-left {
		display: flex;
		align-items: center;
	}

	.guest-time {
		margin-right: 10rpx;
		width: 80rpx;
		height: 84rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #000;
	}

	.guest-day {
		width: 60rpx;
		height: 32rpx;
		background: #fff;
		text-align: center;
		line-height: 32rpx;
		font-size: 36rpx;
		color: #000;
		font-weight: bold;
	}

	.guest-mont {
		font-size: 24rpx;
		color: #fff;
	}

	.guest-title-bar {
		width: 87rpx;
		height: 10rpx;
		background: #000;
	}

	.guest-title-h {
		font-size: 32rpx;
		font-weight: bold;
	}

	.guest-title-p {
		font-size: 20rpx;
		color: #4c4c4c;
	}

	.more-btn {
		width: 140rpx;
		height: 54rpx;
		border-radius: 50rpx;
		background: #f2f2f2;
		border: 1px #e6e6e6 solid;
		text-align: center;
		line-height: 54rpx;
		font-size: 24rpx;
		color: #666;
	}

	.picture-slide {
		height: 350rpx;
	}

	.picture-item {
		padding-right: 20rpx;
	}

	.picture-box {
		padding: 10rpx;
		border: 1px #e6e6e6 solid;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
		position: relative;
	}

	.picture-image {
		width: 300rpx;
		height: 300rpx;
	}

	.picture-num {
		display: flex;
		align-items: center;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		z-index: 9;
	}

	.pic-icon {
		width: 38rpx;
		height: 33rpx;
		margin-right: 5rpx;
	}

	.picture-p {
		font-size: 24rpx;
		color: #fff;
		text-shadow: 0 0 10rpx rgba(0, 0, 0, .5);
	}

	.huodong {
		padding: 30rpx;
	}

	.huodong-title {
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.huodong-title-left {
		display: flex;
		align-items: center;
	}

	.gift-icon {
		width: 73rpx;
		height: 58rpx;
		margin-right: 10rpx;
	}

	.huodong-title-h {
		font-size: 32rpx;
		font-weight: bold;
	}

	.classify-scroll {
		margin-bottom: 30rpx;
	}

	.classify {
		display: flex;
	}

	.classify-item {
		width: 114rpx;
		margin-right: 46rpx;
		text-align: center;
	}

	.classify-img {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.classify-image {
		width: 100rpx;
		height: 100rpx;
	}

	.classify-name {
		font-size: 24rpx;
		color: #4c4c4c;
	}

	.huodong-item {
		margin-bottom: 30rpx;
		background: #fff;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, .1);
	}

	.huodong-img {
		height: 390rpx;
	}

	.huodong-image {
		height: 390rpx;
	}

	.huodong-info {
		padding: 30rpx;
		border: 1px #e6e6e6 solid;
		border-top: none;
	}

	.huodong-info-top {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.huodong-name {
		width: 490rpx;
		font-size: 32rpx;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.huodong-label {
		width: 112rpx;
		height: 32rpx;
		border-radius: 50rpx;
		border-bottom-left-radius: 0;
		background: #f7d031;
		box-shadow: 0 0 10rpx rgba(247, 208, 49, 1);
		text-align: center;
		line-height: 32rpx;
		font-size: 22rpx;
		color: #333;
		position: relative;
	}

	.off-icon {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -108rpx;
		left: 50%;
		margin-left: -50rpx;
		z-index: 9;
	}

	.huodong-p {
		font-size: 24rpx;
		line-height: 36rpx;
		color: #4c4c4c;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.share-btn {
		background-color: white;
		position: relative;
		display: flex;
		padding-left: 0rpx;
		padding-right: 0rpx;
		line-height: 0;
		overflow: visible;
		flex-direction: column;
		border: none;
		border-radius: 0;
	}

	.share-btn::after {
		border: none;
		border-radius: 0;
	}
	
	.remind_wraparea{min-width: 200rpx; height: 60rpx;  position: fixed; left: 0rpx; top:260rpx; z-index: 9999;}
	.remind_wrap{  display: none; opacity:0; animation: viewlinear 3s linear infinite; animation-iteration-count : 1}
	.animation_mid{ animation: viewlinear 3s linear infinite; animation-iteration-count : 1;}
	.rot_current{display: block;}
	.remind_box{ border:1rpx solid #fff; width: 100%; height: 60rpx; font-size: 26rpx; color: #fff; background: rgba(0,0,0,.5);    overflow: hidden; border-radius: 0rpx 30rpx 30rpx 0rpx; display: flex; align-items: center; }
	.userportrait{ border:2rpx solid #fff; width: 60rpx;height: 60rpx; border-radius: 50%; margin-right: 15rpx; overflow: hidden; }
	.userportrait image{width: 60rpx;height: 60rpx;}
	.remind_info{flex: 1; color: #fff; font-size: 26rpx; padding-right: 15rpx;}
</style>
